{extend name="template/base_default"}
{block name="header"}

<link rel="stylesheet" href="__CSS__/weuix.min.css"/>
<script src="__JS__/updown.js"></script>
<script src="__JS__/lazyimg.js"></script>
<style>

    body{
        background-image:url("__IMG__/bj.png");
        background-repeat:no-repeat;
        background-size:cover;
        display:inline-block;
        text-align: center;
        color:#eeeeee;
        width: 100%;
        background-attachment: fixed;
    }
    .v-head{
        margin: auto;
        position:fixed;
        width: 100%;
        z-index: 100;
        background-color: #010D1A;
        height:80px;

    }
    li{
        list-style: none;
    }
    .v-body{
        margin-top: 100px;
        z-index: -1;
    }
    .textItem{
        padding-left: 10px;
        margin-top: 26px;
        width:90%;
        height:60px;
        background-color: rgba(95, 110, 170, 0.4);
        margin-left: auto;
        margin-right: auto;
        color:white;
        border-radius: 10px;
        text-align: left;
        margin-top: 16px;
    }
    .textItem li{
        float: left;
        margin-left: 25px;
    }
    .jf{

        width: 50%;
        height: 21px;
        text-align: center;

        margin: auto 25%;

    }
    .jf img{
        height: 20px;
        width: 20px;
        float: left;
    }
    .jf p{
        margin-left: 3px;
        height: 20px;
        line-height: 20px;
        float: left;
    }
    .titleList ul{
        border-radius: 25px;

        width:95%;
        margin: auto 2.5%;
        background-color: rgba(95, 110, 170, 0.4);
        text-align: center;
    }
   .lileft{
        float:left;
        height:auto;
        min-height:40px;
        color:#eeeeee;
       border: 1px solid #dddddd;
        font-size:16px;
       border-radius: 25px 0 0 25px;
        width:49%;
        text-align: center;
        line-height: 40px;
        list-style-type:none;
    }
    .liright{
        float:left;
        height:auto;
        min-height:40px;
        border: 1px solid #dddddd;
        color:#eeeeee;
        border-radius: 0 25px 25px 0;
        font-size:16px;
        width:49%;
        text-align: center;
        line-height: 40px;
        list-style-type:none;
    }
    .selected{
        background-color: rgba(255, 255, 255, 0.3);
    }
    .titleList ul li{
        line-height: 50px;
        height:50px;
        width:49%;
        margin-top: 20px;
        float: left;
    }
    .main-wrap{
        padding-bottom: 20px;
        padding-top: 20px;
    }
    .time{

        line-height: 60px;
    }
    .store-other-img{
        float: left;
        height: 31px;
        width: 31px;
        margin-top: 15px;


    }
    .selected{
        background-color: rgba(255, 255, 255, 0.3);
    }
    .qinpeng{
        border: 1px solid #dddddd;
        border-radius: 25px 0 0 25px;
    }
    .haoyou{
        border: 1px solid #dddddd;
        border-radius:  0 25px 25px 0
    }
</style>
{/block}
{block name="body"}


<div class="v-head">

<div  class="titleList" style="width: 100%; padding:auto">
    <ul class="friends" >
        <li id="1" class="qinpeng selected">亲朋</li>
        <li id="2" class="haoyou">好友</li>
    </ul>
</div>



</div>
<div id="person_list" class="v-body">


</div>

{/block}
{block name="footer"}
<script type="text/javascript" src="__JS__/public.js"></script>

<script>

    $(document).ready(function(){

        $('.friends li').trigger('click');

    });

        var doClss = 'dropload-down';
        var page=0;//页数
        var types=1;

        $('.friends li').click(function(){
            page = 0;
            $('#person_list').empty();
            if(!$(this).hasClass('selected')){
                types=$(this).attr("id");
                $(this).addClass('selected');
                $(this).siblings().removeClass('selected');
           }else{
                types=$(this).attr("id");
            }
            ///
            $('#person_list').dropload({
                scrollArea : window,
                autoLoad : true, //自动加载
                domDown : {
                    domClass   : doClss,
                    domRefresh : '<div class="dropload-refresh f15 "><i class="icon icon-20"></i>上拉加载更多</div>',
                    domLoad    : '<div class="sss-load f15"><span class="weui-loading"></span>正在加载中...</div>',
                    domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
                },

                loadDownFn : function(me){

                    page++;
                    //   window.history.pushState(null, document.title, window.location.href);
                    var result = '';
                    $.ajax({
                        type: 'GET',
                        url:getBaseUrl()+'/web.php/user/friend_data.html?p='+page+'&types='+types+'',
                        dataType: 'json',
                        success: function(data){
                            var arrLen = data.data.length;
                            if(arrLen > 0){
                                for(var i=0; i<arrLen; i++){
                                    var date = new Date(parseInt(data.data[i].create_time) * 1000).toLocaleString().substr(0,17);
                                    result+='<div class="textItem">'
                                        +'<ul>'
                                        +'<li class="time" width="30%" >'
                                        +'<img class="store-other-img" src="__BASE__/index.php/picture/index?id='+data.data[i].head+'">'
                                        +'</li>'
                                        +'<li class="time" width="60%">'+data.data[i].nickname+'</li>'
                                        +'</ul>'
                                        +'</div>'
                                    ;
                                }
                                // 如果没有数据\
                            }else{
                                // 锁定
                                me.lock();
                                // 无数据
                                me.noData();
                            }

                            // 为了测试，延迟1秒加载
                            setTimeout(function(){
                                $('.'+doClss).before(result);
                                var lazyloadImg = new LazyloadImg({
                                    el: '.weui-updown [data-img]', //匹配元素
                                    top: 50, //元素在顶部伸出长度触发加载机制
                                    right: 50, //元素在右边伸出长度触发加载机制
                                    bottom: 50, //元素在底部伸出长度触发加载机制
                                    left: 50, //元素在左边伸出长度触发加载机制
                                    qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
                                    load: function(el) {
                                        el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
                                    },
                                    error: function(el) {

                                    }
                                });
                                //
                                // 每次数据加载完，必须重置
                                me.resetload();
                            },10);
                        },
                        error: function(xhr, type){
                            alert('Ajax error!');
                            // 即使加载出错，也得重置
                            me.lock();
                        }
                    });
                }
            });

        });


</script>

{/block}